import React from "react";
import PropTypes from 'proptypes';
import styles from "./style.css";
import LeftBoard from '../../components/left-board';
import RightBoard from '../../components/right-board';
import Article from '../../components/article';
import TabSwitch from '../../components/tabswitch';
import Dialog from '../../components/dialog';
import { connect } from 'react-redux';
import { fetchMe, createThread, fetchThreadList} from '../../actions';

class HomePage extends React.Component {
    constructor (props) {
        super(props)
        this.state = { showcreate: false }
    }
    componentWillMount () {
        this.props.fetchThreadList();
    }
    render() {
        const { articles, newCreateThread } = this.props;
        return (
            <div className={styles.content}>
                <div>
                    <LeftBoard>
                        <h3 className={styles.subtitle}>Recommend</h3>
                        { newCreateThread ?  <Article {...newCreateThread}/> : null}
                    </LeftBoard>
                    <RightBoard>
                        <TabSwitch/>
                        <button className={styles.ask} onClick={() => this.setState({showcreate: true})}> ask </button>
                        {
                            articles.map((item, index) => <Article key={index} {...item}/>)
                        }
                    </RightBoard>
                </div>
                <Dialog show={this.state.showcreate} close ={ () => this.setState({showcreate: false})}>
                    <div className={styles.question}>
                        <h3>create your question</h3>
                        <input name="" type="text" placeholder="title" ref="title"/>
                        <textarea cols="30" id="" rows="10" ref="article"></textarea>
                        <input name="" type="text" placeholder="tags, split with dot"/>
                        <button className={styles.create} onClick={() => {
                                this.setState({showcreate: false})
                                return this.props.createThread(this.refs.title.value, this.refs.article.value)
                        }}>create</button>
                    </div>
                </Dialog>
            </div>
        );
    }
}


HomePage.defaultProps = {
    articles: []
}
HomePage.propTypes = {
    articles: PropTypes.arrayOf(PropTypes.shape({
        title: PropTypes.string,
        article: PropTypes.string,
        id: PropTypes.string
    }))
}

function mapStateToProps (state) {
    return {
        newCreateThread: state.thread.resources,
        articles: state.threadlist.resources
    }
}
function mapDispatchToProps (dispatch) {
    return {
        fetchMe: () => dispatch(fetchMe()),
        createThread: (title, article, tags) => dispatch(createThread(title, article, tags)),
        fetchThreadList: (q) => dispatch(fetchThreadList(q))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(HomePage)
